<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			<u-tabs class="page__menu" :list="menu" @change="menuChange" :duration="duration" :current="current">
			</u-tabs>
		</u-sticky>

		<swiper class="page__body swiper" :style="{height: swiperHeight + 'px'}" :duration="duration" :current="current" @change="swiperChange">
			<swiper-item>
				<view class="swiper-item1">
					<view class="" id="swiper-item1">
						<view class="swiper-item1__main">
							<view class="swiper-item1__main--circle1 swiper-item1__main--bg"></view>
							<view class="swiper-item1__main--circle2 swiper-item1__main--bg"></view>
							<view class="swiper-item1__main--num">
								<text>在线设备数：</text>
								<text>{{data.SBS}}</text>
							</view>
							<view class="swiper-item1__main--title">当日发电量（度）</view>
							<view class="swiper-item1__main--value">{{data.DKWH}}</view>
							<view class="swiper-item1__main--params">
								<view class="swiper-item1__main--params__item"
									style="border-right: 1rpx solid #eee;padding-right: 20rpx;text-align: right;">
									<view class="swiper-item1__main--params__item--top" style="text-align: right;">实时功率
									</view>
									<view class="swiper-item1__main--params__item--bottom" style="font-weight: bold;">
										<text style="margin-right: 20rpx;">{{kw}}</text>
										<text>kW</text>
									</view>
								</view>
								<view class="swiper-item1__main--params__item" style="padding-left: 20rpx;text-align: left;">
									<view class="swiper-item1__main--params__item--top" style="text-align: left;">装机功率
									</view>
									<view class="swiper-item1__main--params__item--bottom">
										<text style="margin-right: 20rpx;">1.2</text>
										<text>MWp</text>
									</view>
								</view>
							</view>
							<view class="" style="color: #aaa;margin-top: 10rpx;font-size: 25rpx;">
								<text>更新于：</text>
								<text>{{data.DateTime}}</text>
							</view>
						</view>
						<view class="swiper-item1__list">
							<view class="swiper-item1__list--left">今日收益</view>
							<view class="swiper-item1__list--right">
								<text style="margin-right: 10rpx;">{{data.DPrice}}</text>
								<text>元</text>
							</view>
						</view>
						<view class="swiper-item1__list">
							<view class="swiper-item1__list--left">累计发电量</view>
							<view class="swiper-item1__list--right">
								<text style="margin-right: 10rpx;">{{data.TKWH}}</text>
								<text>万度</text>
							</view>
						</view>
						<view class="swiper-item1__list">
							<view class="swiper-item1__list--left">累计收益</view>
							<view class="swiper-item1__list--right">
								<text style="margin-right: 10rpx;">{{data.TPrice}}</text>
								<text>万元</text>
							</view>
						</view>
						<view class="" style="height: 40rpx;background-color: #eee;"></view>
						<view class="">
							<u-tabs class="" :activeStyle="{color: 'orange'}" lineColor="orange" :list="dateMenuList"
								@change="dateMenuChange"></u-tabs>
						</view>
						<view class=""
							style="display: flex;justify-content: space-between;padding: 20rpx 60rpx;box-sizing: border-box;border-bottom: 1rpx solid #eee;">
							<view class="">
								<view class="arrow" @click="prev">
									<view class="arrow-left"></view>
								</view>
							</view>
							<view class="" @click="selectDateTime">{{dateType}}</view>
							<view class="">
								<view class="arrow" @click="next">
									<view class="arrow-right"></view>
								</view>
							</view>
						</view>
						<view class="" style="margin: 20rpx 10rpx;">
							<text>{{textType}}发电量：</text>
							<text>{{dkWH}}</text>
							<text style="margin-left: 10rpx;">{{whUnit}}</text>
						</view>
						<view class="" style="height: 700rpx;">
							<chart :options="option" />
						</view>
						<view class="" style="height: 40rpx;background-color: #eee;"></view>
						<view class="" style="position: relative;">
							<view class="arrow bottom-arrow" style="left: 40rpx;" @click="bottomPrev">
								<view class="arrow-left"></view>
							</view>
							<swiper style="height: 200rpx;" :autoplay="autoplay" :circular="true" :current="subCurrent" :interval="6000" :duration="300" @change="bottomSwiperChange" @animationfinish="animationfinish">
								<swiper-item v-for="item in subList">
									<view class="bottom-swiper">
										<view class="bottom-swiper__icon">
											<image :src="item.icon" mode=""></image>
										</view>
										<view class="bottom-swiper__des">
											<view class="bottom-swiper__des--text">
												<text>{{item.text}}</text>
												<text>{{item.cal}}</text>
											</view>
											<view class="bottom-swiper__des--value">
												<text>{{item.value}}</text>
												<text style="margin-left: 10rpx;">{{item.unit}}</text>
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
							<view class="arrow bottom-arrow" style="right: 40rpx;" @click="bottomNext">
								<view class="arrow-right"></view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2">
					<view class="" id="swiper-item2">
						<view class="sunny" v-for="item in sunnyDevice" :key="item.aname" @click="goSunnyDetailPage(item)">
							<view class="" hover-class="clickable">
								<view class="sunny__icon" :style="{'background-color': item.color}"></view>
								<view class="sunny__params">
									<view class="sunny__params--name">{{item.aname}}（{{item.status}}）</view>
									<view class="sunny__params--des">
										<text>日发电量：</text>
										<text>{{item.DKWH}}</text>
										<text style="margin-left: 10rpx;">kWh</text>
									</view>
									<view class="">
										<text>总有功功率：</text>
										<text>{{item.TKW}}</text>
										<text style="margin-left: 10rpx;">kW</text>
									</view>
								</view>
							</view>
							<view class="" style="height: 10rpx;background-color: #eee;"></view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<u-datetime-picker :show="dayPickerVisible" v-model="day" mode="date" @cancel="dayPickerVisible = false"
			@confirm="dayConfirm" />
		<u-datetime-picker :show="monthPickerVisible" v-model="month" mode="year-month"
			@cancel="monthPickerVisible = false" @confirm="monthConfirm" />
		<u-picker :show="yearPickerVisible" :defaultIndex="defaultIndex" :columns="yearColumns"
			@cancel="yearPickerVisible = false" @confirm="yearConfirm"></u-picker>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import {
		getTableSuffix,
		setDotNumber,
		throttle
	} from '@/common/custom_util.js'
	import moment from 'moment'
	import Chart from '@/components/custom/chart/echart.vue'

	let first = false;
	export default {
		components: {
			Chart
		},
		data() {
			return {
				menu: [{
						name: '概览'
					},
					{
						name: '设备'
					}
				],
				dateMenuList: [{
						name: '日'
					},
					{
						name: '月'
					},
					{
						name: '年'
					},
				],
				subList: [
					{
						icon: require('@/static/theme/default/home/eryanghuatan.png'),
						text: '二氧化碳减排',
						cal: '（1度=0.997千克）',
						value: '',
						unit: '千克'
					},
					{
						icon: require('@/static/theme/default/home/mei.png'),
						text: '节约标准煤',
						cal: '（1度=0.404千克）',
						value: '',
						unit: '千克'
					},
					{
						icon: require('@/static/theme/default/home/su.png'),
						text: '等效植树',
						cal: '（1度=0.0054棵）',
						value: '',
						unit: '千棵'
					},
				],
				data: {}, //总览数据
				current: 0,
				subCurrent: 0,
				duration: 400,
				autoplay: true,
				day: moment().format('YYYY-MM-DD'),
				month: moment().format('YYYY-MM'),
				year: moment().format('YYYY'),
				type: 0,
				option: {},
				dkWH: '',
				dayPickerVisible: false,
				monthPickerVisible: false,
				yearPickerVisible: false,
				yearColumns: [
					[]
				],
				defaultIndex: [],
				swiperHeight: 0,
				whUnit: '度',
				kw: '',//实时功率
				
				sunnyDevice: [], //光伏设备数据
			}
		},
		onLoad() {
			let sYear = 2000;
			let eYear = moment().format('YYYY');
			for (let i = sYear; i <= eYear; i++) {
				this.yearColumns[0].push(i)
			}
			this.defaultIndex.push(this.yearColumns[0].length - 1)
			this.getSunnyTotalData();
			this.getSunnyTotalDayKWList();

			this.getSunnyDeviceList();
		},
		onReady() {
			this.$nextTick(() => {
			   this.setSwiperHeight('#swiper-item1');
			  });
		},
		computed: {
			textType() {
				let t = ''
				switch (this.type) {
					case 0:
						t = '当日';
						break;
					case 1:
						t = '当月';
						break;
					case 2:
						t = '当年';
						break;
					case 3:
						t = '总';
						break;
				}
				return t
			},
			dateType() {
				switch (this.type) {
					case 0:
						return moment(this.day).format('YYYY-MM-DD')
						break;
					case 1:
						return moment(this.month).format('YYYY-MM')
						break;
					case 2:
						return this.year
						break;
					case 3:
						break;
				}
			}
		},
		methods: {
			/**
			 * 获取光伏总览数据
			 */
			getSunnyTotalData() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSunnyTotalData',
					apiparam: {
						tablesuffix: getTableSuffix(),
					},
					success(res) {
						if (res.length) {
							res[0].DKWH = setDotNumber(res[0].DKWH, 1,true);
							res[0].DPrice = setDotNumber(res[0].DPrice, 3,true);
							res[0].TKWH = setDotNumber(res[0].TKWH, 3,true);
							res[0].TPrice = setDotNumber(res[0].TPrice, 3,true);
							res[0].DateTime = moment(res[0].DateTime).format('HH:mm');
							that.data = res[0];
							
							that.subList[0].value = setDotNumber(res[0].TKWH * 10000 * 0.997,0);
							that.subList[1].value = setDotNumber(res[0].TKWH * 10000 * 0.404,0);
							that.subList[2].value = setDotNumber(res[0].TKWH * 10000 * 0.054 / 1000,3);
						}
					}
				})
			},
			/**
			 * 获取某日汇总的发电量分时数据
			 */
			getSunnyTotalDayKWList() {
				let that = this;
				this.dkWH = '/';
				this.whUnit = '度'
				_custom.getDataJava({
					apiname: 'getSunnyTotalDayKWList',
					apiparam: {
						tablesuffix: getTableSuffix(moment(this.day).format('YYYY'), moment(this.day).format(
							'MM')),
						obsdate: moment(this.day).format('YYYY-MM-DD')
					},
					success(res) {
						if (res.length) {
							let label = [];
							let data = res.map(item => {
								return [moment(item.DateTime).format('x') * 1, (item.Val * 1).toFixed(2)]
							})
							that.dkWH = (res[0].DKWH * 1).toFixed(1);
							if(moment(res[0].DateTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
								let kw = res[res.length - 1].Val ? setDotNumber(res[res.length - 1].Val,3) : '';
								if(that.kw != kw) {
									that.kw = kw;
									that.getSunnyTotalData()
								}
								if(!first) {
									that.kw = kw;
									first = true;
								}
							} 
							that.option = {
								animation: false,
								legend: {
									left: '2%',
									bottom: '0',
									icon: "circle",
									itemWidth: 10,
									itemHeight: 10,
									textStyle: {
										color: '#333',
										fontSize: 14,
									},
									data: [{
										name: 'PV',
									}],
								},
								dataZoom: { // 放大和缩放
									type: 'inside'
								},
								tooltip: {
									trigger: 'axis',
								},
								grid: {
									top: '10%',
									left: '13%',
									bottom: '16%'
								},
								xAxis: [{
									type: 'time',
									min: moment(that.day).format('YYYY-MM-DD') + ' 00:00',
									max: moment(that.day).format('YYYY-MM-DD') + ' 23:59',
									minInterval: 24,
									boundaryGap: false,
									axisTick: {
										show: false,
									},
									axisLabel: {
										format: 'xLabelFormat'
									},
									splitLine: {
										show: false,
									},
									axisLine: {
										show: true,
										lineStyle: {
											color: '#666'
										},
									},
								}],
								yAxis: {
									type: 'value',
									name: '功率（kW）',
									nameTextStyle: {
										color: '#666',
										padding: [0, 0, 0, 0],
									},
									axisLine: {
										show: true,
										lineStyle: {
											color: '#666'
										},
									},
								},
								series: [{
									name: 'PV',
									data: data,
									type: 'line',
									itemStyle: {
										normal: {
											width: 1,
											color: '#fbb034',
										},
									},
									symbol: 'none',
									label: {
										show: false,
									},
									areaStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
													offset: 0,
													color: '#fbb034',
												},
												{
													offset: 0.8,
													color: 'rgba(255, 222, 181, 0.5)',
												}
											],
											global: false
										}
									},
								}]
							}
						} else {
							that.option = {};
						}
					},
					fail() {
						that.option = {};
					}
				})
			},
			/**
			 * 获取某月汇总的发电量每日数据
			 */
			getSunnyTotalMonthKWHList() {
				let that = this;
				this.dkWH = '/';
				this.whUnit = '度'
				_custom.getDataJava({
					apiname: 'getSunnyTotalMonthKWHList',
					apiparam: {
						tablesuffix: getTableSuffix(moment(this.month).format('YYYY'), moment(this.month).format(
							'MM')),
						obsdate: moment(this.month).format('YYYY-MM')
					},
					success(res) {
						if (res.length) {
							let daysNumber = moment(this.month).daysInMonth();
							let days = [];
							let data = [];
							for (let i = 1; i <= daysNumber; i++) {
								days.push(i);
								let flag = false
								res.forEach(item => {
									let day = moment(item.DateTime).format('DD')
									if (day == i) {
										data.push([i-1, (item.KWH * 1).toFixed(2)])
										flag = true;
									}
								})
								if (!flag) {
									data.push([i, 0])
								}
							}
							let wh = 0;
							res.forEach(item => {
								wh += (item.KWH * 1)
							})
							that.dkWH = wh.toFixed(1);
							that.option = {
								tooltip: {
									trigger: 'axis',
								},
								legend: {
									left: '2%',
									bottom: '0',
									icon: "circle",
									itemWidth: 10,
									itemHeight: 10,
									textStyle: {
										color: '#333',
										fontSize: 14,
									},
									data: [{
										name: 'PV',
									}],
								},
								grid: {
									top: '10%',
									left: '14%',
									bottom: '16%'
								},
								dataZoom: { // 放大和缩放
									type: 'inside'
								},
								xAxis: [{
									type: 'category',
									boundaryGap: true,
									axisTick: {
										show: false,
									},
									splitLine: {
										show: false,
									},
									axisLine: {
										show: true,
										lineStyle: {
											color: '#666'
										},
									},
									data: days
								}],
								yAxis: {
									type: 'value',
									name: '发电量（度）',
									nameTextStyle: {
										color: '#666',
										padding: [0, 0, 0, 0],
									},
									axisLine: {
										show: true,
										lineStyle: {
											color: '#666'
										},
									},
								},
								series: [{
									name: 'PV',
									data: data,
									type: 'bar',
									areaStyle: {},
									itemStyle: {
										color: 'orange'
									},
									symbol: 'none',
									label: {
										show: false,
									},
								}]
							}
						} else {
							that.option = {}
						}
					},
					fail() {
						that.option = {};
					}
				})
			},
			/**
			 * 获取某年汇总的发电量月数据
			 */
			getSunnyTotalYearKWHList() {
				let that = this;
				this.dkWH = '/';
				this.whUnit = '万度'
				_custom.getDataJava({
					apiname: 'getSunnyTotalYearKWHList',
					apiparam: {
						year: this.year
					},
					success(res) {
						if (res.length) {
							let label = [];
							let data = res.map(item => {
								let month = moment(item.DateTime).format('MM')
								label.push(month)
								return [month, (item.Val * 1 / 10000).toFixed(1)]
							})
							that.option = {
								tooltip: {
									trigger: 'axis',
								},
								legend: {
									left: '2%',
									bottom: '0',
									icon: "circle",
									itemWidth: 10,
									itemHeight: 10,
									textStyle: {
										color: '#333',
										fontSize: 14,
									},
									data: [{
										name: 'PV',
									}],
								},
								grid: {
									top: '10%',
									left: '6%',
									bottom: '16%'
								},
								dataZoom: { // 放大和缩放
									type: 'inside'
								},
								xAxis: [{
									type: 'category',
									boundaryGap: true,
									axisTick: {
										show: false,
									},
									splitLine: {
										show: false,
									},
									axisLine: {
										show: true,
										lineStyle: {
											color: '#666'
										},
									},
									data: label
								}],
								yAxis: {
									type: 'value',
									name: '发电量（万度）',
									nameTextStyle: {
										color: '#666',
										padding: [0, 0, 0, 50],
									},
									axisLine: {
										show: true,
										lineStyle: {
											color: '#666'
										},
									},
								},
								series: [{
									name: 'PV',
									data: data,
									type: 'bar',
									areaStyle: {},
									itemStyle: {
										color: 'orange'
									},
									symbol: 'none',
									label: {
										show: false,
									},
								}]
							}
							let wh = 0;
							res.forEach(item => {
								wh += (item.Val * 1 / 10000)
							})
							that.dkWH = wh.toFixed(1);
						} else {
							that.option = {}
						}
					},
					fail() {
						that.option = {};
					}
				})
			},
			/**
			 * 切换菜单
			 * @param {Object} e
			 */
			menuChange(e) {
				this.current = e.index;
				switch(this.current) {
					case 0:
						this.getSunnyTotalData();
						this.getSunnyTotalDayKWList();
						break;
					case 1:
						this.getSunnyDeviceList();
						break;
				}
			},
			/**
			 * 获取swiper高度
			 */
			setSwiperHeight(element) {
			  let query = uni.createSelectorQuery().in(this);
			  query.select(element).boundingClientRect();
			  query.exec((res) => {
				if (res && res[0]) {
				  this.swiperHeight = res[0].height;
				}
			  });
			},
			/**
			 * 切换swiper
			 * @param {Object} e
			 */
			swiperChange(e) {
				this.current = e.detail.current;
				switch(this.current) {
					case 0:
						this.$nextTick(() => {
					       this.setSwiperHeight('#swiper-item1');
					      });
						
						break;
					case 1:
						this.$nextTick(() => {
						   this.setSwiperHeight('#swiper-item2');
						  });
						break;
				}
			},
			/**
			 * 切换年月日总
			 * @param {Object} e
			 */
			dateMenuChange(e) {
				switch (e.index) {
					case 0:
						this.type = 0;
						this.getSunnyTotalDayKWList();
						break;
					case 1:
						this.type = 1;
						this.getSunnyTotalMonthKWHList();
						break;
					case 2:
						this.type = 2;
						this.getSunnyTotalYearKWHList();
						break;
					case 3:
						this.type = 3;
						break;
				}
			},
			/**
			 * 前一天/月/年
			 */
			prev() {
				switch (this.type) {
					case 0:
						this.day = moment(this.day).subtract(1, 'day').format('YYYY-MM-DD');
						this.getSunnyTotalDayKWList();
						break;
					case 1:
						this.month = moment(this.month).subtract(1, 'month').format('YYYY-MM');
						this.getSunnyTotalMonthKWHList();
						break;
					case 2:
						this.year = moment(this.year).subtract(1, 'year').format('YYYY');
						this.getSunnyTotalYearKWHList();
						break;
					case 3:
						break;
				}
			},
			/**
			 * 后一天/月/年
			 */
			next() {
				switch (this.type) {
					case 0:
						this.day = moment(this.day).subtract(-1, 'day').format('YYYY-MM-DD');
						this.getSunnyTotalDayKWList();
						break;
					case 1:
						this.month = moment(this.month).subtract(-1, 'month').format('YYYY-MM');
						this.getSunnyTotalMonthKWHList();
						break;
					case 2:
						this.year = moment(this.year + '').subtract(-1, 'year').format('YYYY');
						this.getSunnyTotalYearKWHList();
						break;
					case 3:
						break;
				}
			},
			/**
			 * 底部的切换
			 */
			bottomPrev: throttle(function (){
				if(this.subCurrent != 0) {
					this.subCurrent--;
				} else {
					this.subCurrent = this.subList.length - 1;
				}
			},300),
			/**
			 * 底部的切换
			 */
			bottomNext: throttle(function (){
				if(this.subCurrent != this.subList.length - 1) {
					this.subCurrent++;
				} else {
					this.subCurrent = 0;
				}
			},300),
			/**
			 * 底部swiper切换
			 * @param {Object} e
			 */
			bottomSwiperChange({detail}) {
				if(detail.source != 'touch' && detail.source != 'autoplay') {
					this.autoplay = false;
				}
				this.subCurrent = detail.current;
			}, 
			/**
			 * 底部swiper动画结束事件
			 */
			animationfinish() {
				this.autoplay = true;
			},
			/**
			 * 点击日期
			 */
			selectDateTime() {
				switch (this.type) {
					case 0:
						this.dayPickerVisible = true
						break;
					case 1:
						this.monthPickerVisible = true
						break;
					case 2:
						this.yearPickerVisible = true;
						break;
					case 3:
						break;
				}
			},
			/**
			 * 日选择器确认
			 */
			dayConfirm(e) {
				this.day = moment(e.value).format('YYYY-MM-DD');
				this.getSunnyTotalDayKWList();
				this.dayPickerVisible = false;
			},
			/**
			 * 月选择器确认
			 */
			monthConfirm(e) {
				this.month = moment(e.value).format('YYYY-MM');
				this.getSunnyTotalMonthKWHList();
				this.monthPickerVisible = false;
			},
			/**
			 * 年选择器确认
			 */
			yearConfirm(e) {
				this.year = e.value[0];
				this.getSunnyTotalYearKWHList();
				this.yearPickerVisible = false;
			},
			/**
			 * 获取光伏设备列表
			 */
			getSunnyDeviceList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSunnyDeviceList',
					apiparam: {
						tablesuffix: getTableSuffix(),
					},
					success(res) {
						that.getDicBSList(res);
					}
				})
			},
			/**
			 * 通用字典接口
			 */
			getDicBSList(v) {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDicBSList',
					apiparam: {
						obscode: "SYS",
						xmcode: 'GFSBZT',
					},
					success(res) {
						v.forEach(item => {
							item.DKWH = (item.DKWH * 1).toFixed(1)
							item.TKW = (item.TKW * 1).toFixed(3)
							res.forEach(v => {
								if(item.WZT == v.intA) {
									item.status = v.nameA;
									switch(v.intA) {
										case '0':
											item.color = '#0abf53';
											break;
										case '2':
										case '3':
										case '4':
										case '6':
											item.color = '#00bce4';
											break;
										case '1':
										case '5':
											item.color = '#8db9ca';
											break;
										case '10':
											item.color = '#ffd900';
											break;
										case '11':
										case '12':
										case '17':
											item.color = '#f48924';
											break;
										case '9':
										case '13':
										case '18':
											item.color = '#fd5c63';
											break;
									}
								}
							})
						})
						that.sunnyDevice = v;
					}
				})
			},
			/**
			 * 跳转到详情页
			 * @param {Object} v
			 */
			goSunnyDetailPage(v) {
				uni.navigateTo({
					url: '/pages/home/child/sunny-power/detail?data=' + JSON.stringify(v)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		&__menu {
			border-bottom: 1rpx solid #eee;
		}

		&__body {
			background-color: #fff;
		}
	}

	.swiper-item1 {

		&__main {
			text-align: center;
			padding-top: 80rpx;
			margin-bottom: 20rpx;
			position: relative;

			&--bg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: -1;
			}

			&--circle1 {
				width: 430rpx;
				height: 430rpx;
				border-radius: 50%;
				background-color: #00B26A;
			}

			&--circle2 {
				width: 400rpx;
				height: 400rpx;
				border-radius: 50%;
				background-color: #fff;
			}

			&--num {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
			}

			&--title {
				font-size: 30rpx;
				margin-top: 170rpx;
			}

			&--value {
				font-size: 50rpx;
				font-weight: bold;
			}

			&--params {
				display: flex;
				justify-content: center;
				margin-top: 80rpx;
				z-index: 9;
				background-color: #fff;

				&__item {
					flex: 1;

					&--top {
						font-size: 25rpx;
					}

					&--bottom {
						font-size: 27rpx;
					}
				}
			}
		}

		&__list {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
			margin: 0 20rpx;
			padding: 20rpx 0;
		}
	}

	.arrow {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .1);
		position: relative;
		overflow: hidden;

		&-left {
			width: 15rpx;
			height: 15rpx;
			border-left: 1rpx solid #000;
			border-bottom: 1rpx solid #000;
			transform: rotate(45deg) translate(-50%, -50%);
			position: absolute;
			left: 40%;
			top: 55%;
		}

		&-right {
			width: 15rpx;
			height: 15rpx;
			border-right: 1rpx solid #000;
			border-top: 1rpx solid #000;
			transform: rotate(45deg) translate(-50%, -50%);
			position: absolute;
			right: 40%;
			top: 55%;
		}
	}
	
	.bottom-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 9;
	}

	.sunny {
		position: relative;
		box-sizing: border-box;

		&__icon {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}

		&__params {
			padding: 20rpx 0;
			padding-left: 100rpx;
			font-size: 27rpx;

			&--title {
				font-size: 35rpx;
			}
		}
	}
	
	.bottom-swiper {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
		&__icon {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.tip {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.echarts {
		width: 100%;
		height: 100%;
	}

	.page /deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
